<template>
  <div class="shareInfo" v-if="info !== ''">
    <sub-nav-bar :path="path"></sub-nav-bar>
    <div class="content">
      <!-- 文章标题 -->
      <h3 class="title">{{ info.title }}</h3>
      <div class="other">
        <!-- 头像 -->
        <img
          class="o1"
          v-if="info.author.avatar"
          :src="baseUrl + info.author.avatar"
          alt=""
        />
        <img v-else class="o1" src="@/assets/logo.png" alt="" />
        <!-- 昵称 分享时间 -->
        <div class="o2">
          <div class="o2-top">{{ info.author.nickname }}</div>
          <div class="o2-bottom">{{ info.updated_at | formatTime }}</div>
        </div>
        <i class="iconfont o3">&#xe644;</i>
        <!-- 阅读量 -->
        <div class="o4">{{ info.read }}</div>
        <i class="iconfont o5">&#xe638;</i>
        <!-- 点赞量 -->
        <div class="o6">{{ info.star }}</div>
      </div>
      <div class="txt" v-html="info.content"></div>
    </div>
    <div class="line"></div>
    <div class="comment">
      <h3 class="title">
        评论<span class="num">{{ commentTotal }}</span>
      </h3>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="load"
      >
        <!-- 用户评论 -->
        <div
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="item-top">
            <!-- 头像存在 -->
            <img
              class="i1"
              v-if="item.author.avatar"
              :src="baseUrl + item.author.avatar"
              @click="reSend(item)"
              alt=""
            />
            <!-- 头像不存在 -->
            <img
              v-else
              class="i1"
              @click="reSend(item)"
              src="@/assets/logo.png"
              alt=""
            />
            <!-- 昵称 时间 -->
            <div class="i2">
              <div class="i2-name">{{ item.author.nickname }}</div>
              <div class="i2-time">{{ item.created_at | formatTime }}</div>
            </div>
            <!-- 点赞量 -->
            <div
              class="i3"
              @click="commentsStar(item)"
              :class="{
                red: isLogin && userInfo.starComments.includes(item.id)
              }"
            >
              {{ item.star }}
            </div>
            <i
              @click="commentsStar(item)"
              :class="{
                red: isLogin && userInfo.starComments.includes(item.id)
              }"
              class="iconfont i4"
              >&#xe638;</i
            >
          </div>
          <!-- 评论内容 -->
          <div class="item-middle">
            {{ item.content }}
          </div>
          <div class="item-bottom" v-if="item.children_comments.length > 0">
            <div
              class="recomment-item"
              v-for="(item2, index2) in item.children_comments"
              :key="index2"
            >
              <span class="info-name">{{ item2.author }}:</span>
              <span class="info-txt">{{ item2.content }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 发送区域 -->
    <div class="send">
      <!-- 评论框 -->
      <div class="s1" @click="openSend">
        我来补充两句
      </div>
      <!-- 收藏 -->
      <div
        class="s2"
        :class="{ red: isLogin && userInfo.collectArticles.includes(+id) }"
      >
        <div class="iconfont">&#xe660;</div>
        <div class="num">{{ info.collect }}</div>
      </div>
      <!-- 点赞 -->
      <div
        class="s2"
        :class="{ red: isLogin && userInfo.starArticles.includes(+id) }"
      >
        <div class="iconfont">
          &#xe639;
        </div>
        <div class="num">{{ info.star }}</div>
      </div>
      <!-- 分享 -->
      <div class="s2">
        <div class="iconfont">&#xe63e;</div>
        <div class="num">{{ info.share }}</div>
      </div>
    </div>
    <!-- 弹框
        van-popup
           v-model:是否显示弹框
           position:弹框位置
     -->
    <van-popup v-model="showSend" position="bottom">
      <div class="send-area">
        <van-field
          type="textarea"
          rows="5"
          placeholder="我来补充两句"
          v-model="inputValue"
        ></van-field>
        <div class="send-btn">
          <span v-if="inputValue.length" @click="send" class="red">发送</span>
          <span v-else>发送</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  articlesShareInfo,
  articlesCommentsId, // 面经评论
  articlesComments,
  // articlesStar,
  // articlesCollect,
  articleCommentsStar
} from '@/api/find'
import { mapState } from 'vuex'
export default {
  name: 'shareInfo',
  computed: {
    ...mapState(['userInfo', 'isLogin'])
  },
  data () {
    return {
      id: this.$route.params.id, // 接收路由传参id
      info: '',
      baseUrl: process.env.VUE_APP_URL,
      path: this.$route.query.repath, // 接收路由传参并使用
      loading: false,
      finished: false,
      currPage: 1,
      pageSize: 2,
      showSend: false,
      parent: '', // 回复评论的id
      inputValue: '',
      parentItem: '',
      commentTotal: 0,
      commentList: [] // 发送评论
    }
  },
  watch: {
    showSend: {
      handler () {
        if (this.showSend === false) {
          this.inputValue = ''
        }
      }
    }
  },
  async created () {
    // 面经分享详情
    const res = await articlesShareInfo(this.id)
    this.info = res.data.data
    // window.console.log(res)
  },
  methods: {
    async load () {
      this.currPage++
      const res = {
        star: (this.currPage - 1) * this.pageSize,
        limit: this.pageSize
      }
      const res2 = await articlesCommentsId(this.id, res)
      this.commentList.push(...res2.data.data.list)
      this.commentTotal = res2.data.data.total
      this.loading = false
      if (this.commentTotal <= this.commentList.length) {
        this.finished = true
      }
      // window.console.log(res2)
    },
    // 打开发送评论窗口
    openSend () {
      this.showSend = true
      this.parent = ''
    },
    // 发送评论
    async send () {
      const res = await articlesComments({
        content: this.inputValue,
        article: this.id,
        parent: this.parent
      })
      // 关闭弹窗
      this.showSend = false
      if (this.parent === '') {
        res.data.data.star = 0
        this.commentList.unshift(res.data.data)
      } else {
        // this.parentItem.children_comments.push(res.data.data)
        const _index = this.commentList.findIndex((item, index) => {
          return item.id === this.parent
        })
        this.commentList[_index].children_comments.push(res.data.data)
      }
      // window.console.log(res)
    },
    // 回复评论
    reSend (item) {
      this.parent = item.id
      this.showSend = true
      this.parentItem = item
    }
  },

  // 点赞功能
  // async starEvent () {
  //   this.$toast.loading({ duration: 0 })
  //   const res = await articlesStar({ article: this.id })
  //   if (res.data.data.list.includes(+this.id)) {
  //     this.$toast.success('点赞成功')
  //   } else {
  //     this.$toast.fail('取消点赞')
  //   }
  //   this.info.star = res.data.data.num
  //   this.$store.dispatch('refreshUserInfo')
  // },
  // 收藏 功能
  // async collectEvent () {
  //   this.$toast.loading({ duration: 0 })
  //   const res = await articlesCollect({ id: this.id })
  //   if (res.data.data.list.includes(+this.id)) {
  //     this.$toast.success('收藏成功')
  //   } else {
  //     this.$toast.fail('取消收藏')
  //   }
  //   this.info.collect = res.data.data.num
  //   this.$store.dispatch('refreshUserInfo')
  // },
  // 面经评论点赞
  async commentsStar (item) {
    this.$toast.loading({ duration: 0 })
    const res = await articleCommentsStar({ id: item.id })
    if (res.data.data.list.includes(+item.id)) {
      this.$toast.success('点赞成功')
    } else {
      this.$toast.fail('取消点赞')
    }
    item.star = res.data.data.num
    this.$store.dispatch('refreshUserInfo')
    // window.console.log(res)
  }
}
</script>

<style lang="less" scoped>
.shareInfo {
  .content {
    padding: 0 @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #181a39;
      line-height: 25px;
    }
    .other {
      display: flex;
      color: #ccc;
      font-size: 12px;
      align-items: center;
      margin: 20px 0;
      .o1 {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
      .o2 {
        flex: 1;
        .o2-top {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #545671;
          line-height: 16px;
          letter-spacing: 0px;
        }
        .o2-bottom {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 16px;
          letter-spacing: 0px;
        }
      }
    }
    .txt {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
      //   看得到的都可以管到,看不到的管不到
      &::v-deep img {
        width: 100%;
      }
    }
  }
  .line {
    height: 10px;
    background-color: #f7f4f5;
  }
  .comment {
    padding: 0 @p15 60px;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222;
      line-height: 25px;
      letter-spacing: 0px;
      position: relative;
      padding: 20px 0;
      num {
        position: absolute;
        top: 15px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #b4b4bd;
        line-height: 16px;
        letter-spacing: 0px;
      }
    }
    .comment-item {
      margin-bottom: 30px;
      .item-top {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #ccc;
        .i1 {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .i2 {
          flex: 1;
          .i2-name {
            color: #545671;
          }
        }
        .i3 {
          padding-right: 10px;
        }
      }
      .item-middle {
        word-wrap: break-word;
        word-break: break-all;
        margin-left: 45px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 600;
        text-align: justify;
        color: #181a39;
        line-height: 27px;
        letter-spacing: 0px;
        padding: 15px 0;
      }
      .item-bottom {
        margin-left: 45px;
        margin-bottom: 15px;
        background-color: #f7f4f5;
        padding: 20px 15px;
        font-family: PingFangSC, PingFangSC-Semibold;
        text-align: left;
        line-height: 20px;
        letter-spacing: 0px;
        .recomment-item {
          word-wrap: break-word;
          word-break: break-all;
          .info-name {
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #545671;
            line-height: 20px;
            letter-spacing: 0px;
          }
          .info-txt {
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 400;
            text-align: left;
            color: #545671;
            line-height: 20px;
            letter-spacing: 0px;
          }
        }
      }
    }
  }
  .send {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    color: #ccc;
    font-size: 12px;
    background-color: #fff;
    padding: 0 @p15;
    .s1 {
      flex: 1;
      height: 34px;
      background-color: #f7f4f5;
      line-height: 34px;
      padding-left: 10px;
    }
    .s2 {
      margin-left: 15px;
      text-align: center;
      .iconfont {
        font-size: 28px;
      }
    }
  }
  .send-area {
    padding: @p15;
    .van-field {
      background-color: #f7f4f5;
    }
    .send-btn {
      text-align: right;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #b4b4bd;
      line-height: 22px;
      letter-spacing: 0px;
      padding-top: 10px;
      .red {
        color: red;
      }
    }
  }
  .red {
    color: red !important;
  }
}
</style>
